<template>
	<view>
		<view class="bannerBox">
			<view class="textBox">
				<view class="title">合同智审宝</view>
				<view class="tag"><span>安 全</span><span>精 准</span><span>高 效</span></view>
			</view>
		</view>
		<view class="bgc"></view>
		
		<view class="login-view" style="">
			<view class="t-login" v-if="!registerFlag">
				<form class="cl">
					<view class="t-a">
						<text class="txt">手机号</text>
						<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input password type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" />
					</view>
					<view class="" style="display: flex; justify-content: space-around;">
						<button @click="goRegister()" style="background-color: #67c23a;">去 注 册</button>
						<button @tap="verify()">登 录</button>
					</view>
				</form>
				<view class="t-f"><text>——— 忘记密码，请联系管理员 ———</text></view>
			</view>
			<view class="t-login" v-else>
				<form class="cl">
					<view class="t-a">
						<text class="txt">手机号</text>
						<input type="number" name="username" placeholder="请输入您的手机号" maxlength="11" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input password type="password" name="password" maxlength="18" placeholder="请输入您的密码" v-model="password" />
					</view>
					<view class="t-a">
						<text class="txt">确认密码</text>
						<input password type="password" name="repassword" maxlength="18" placeholder="请输入您的密码" v-model="repassword" />
					</view>
					<view class="" style="display: flex; justify-content: space-around;">
						<button @click="goRegister()">去 登 录</button>
						<button @tap="verifyRegister()" style="background-color: #67c23a;">注 册</button>
					</view>
				</form>
				<view class="t-f"><text>——— 忘记密码，请联系管理员 ———</text></view>
			</view>
		</view>
<!-- 		<view class="login-view" style="">
			<view class="t-login">
				<u-icon name="arrow-left" color="#000000" custom-style="margin-left:-20px;margin-top:-20px" @click="goBack"></u-icon>
				<view class="t-b-wx">
					您好，
					<br />
					欢迎来到 合同智审宝
				</view>
				<button open-type="getPhoneNumber" @getphonenumber="wxGetPhone">授权登录</button>
				<view style="text-align: center;margin-top: 30rpx;">
					<view class="text-gray">授权信息仅用于小程序登录</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { updateClientId } from '@/api/user.js';
import { useAuthStore } from '@/store/index';
import { getRouters, getInfo, login, register,wxLogin } from '@/api/login.js';
import env from '@/env'

const authStore = useAuthStore();
// 定义响应式数据
const phone = ref('');
const pwd = ref('');
const registerFlag = ref(false)
// 定义响应式数据
const username = ref('');
const password = ref('');
const repassword = ref('');

// 验证登录信息
const verify = () => {
    if (!phone.value) {
        uni.showToast({ title: '请输入您的手机号', icon: 'none' });
        return;
    }
    if (!uni.$u.test.mobile(phone.value)) {
        uni.showToast({ title: '请输入正确手机号', icon: 'none' });
        return;
    }
    if (!pwd.value) {
        uni.showToast({ title: '请输入您的密码', icon: 'none' });
        return;
    }
    submit();
};

// 提交登录信息
const submit = async () => {
    try {
        const loginData = { username: phone.value, password: pwd.value,clientId: env.VITE_APP_CLIENT_ID, tenantId: "000000", grantType:"password" };
		authStore.Logind(loginData)
    } catch (error) {
        console.log(error, 'error');
    }
};


const goRegister = () => {
	registerFlag.value = !registerFlag.value
	phone.value = ''
	pwd.value = ''
	username.value = ''
	password.value = ''
	repassword.value = ''
}

const verifyRegister = () => {
	if (!username.value) {
	    uni.showToast({ title: '请输入您的手机号', icon: 'none' });
	    return;
	}
	if (!uni.$u.test.mobile(username.value)) {
	    uni.showToast({ title: '请输入正确手机号', icon: 'none' });
	    return;
	}
	if (!password.value) {
	    uni.showToast({ title: '请输入您的密码', icon: 'none' });
	    return;
	}
	if (!repassword.value) {
	    uni.showToast({ title: '请确认您的密码', icon: 'none' });
	    return;
	}
	if (password.value != repassword.value) {
	    uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
	    return;
	}
	registerSub();
}

const registerSub = async () => {
	try {
	    const loginData = { username: username.value, password: password.value, clientId: env.VITE_APP_CLIENT_ID, tenantId: "000000",userType:'xcx_user',grantType:"xcx" };
	    console.log('有病啊：',loginData);
		const { data } = await register(loginData);
		if(data.code === 200) {
			setTimeout(()=> {
				uni.showToast({ title: '注册成功', icon: 'none' });
				registerFlag.value = !registerFlag.value
			},1000)
		} 
	    if (data.code !== 200) {
	        uni.showToast({ title: data.msg, icon: 'none' });
	        return;
	    }
	} catch (error) {
	    console.log(error, 'error');
	}
}

// 获取微信手机号并登录
const wxGetPhone = (e) => {
    uni.login({
        provider: 'weixin',
        success: (res) => {
            if (!e.detail.code) {
                uni.showToast({
                    title: '获取手机号失败',
                    icon: 'none'
                });
                return;
            }
            authStore.wxLogind(e.detail.code, res.code);
        },
    });
};


// 返回上一个页面
const goBack = () => {
    uni.navigateTo({
        url: '/pages/home/index'
    });
};

// 页面加载完成后执行
onMounted(() => {
});
</script>
<style>
page {
	background-color: #F2F3F5;
}
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.bannerBox {
	background: url('https://www.zxsl.zxmap.cn/zxch-app/2025/07/01/e7af1a94f3054c85b7a761989e604ac9.png') no-repeat;
	background-size: cover;
	height: 320rpx;
	position: relative;
}
.bannerBox .textBox {
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 60rpx;
	font-weight: 600;
}
.bannerBox .textBox .tag {
	font-size: 30rpx;
	color: #909399;
	display: flex;
	justify-content: space-around;
	margin-top: 10rpx;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}
.bgc {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
}
.login-view {
	width: 100%;
	height: calc(100vh - 300rpx);
	position: relative;
	margin-top: -140rpx;
	background-color: #F2F3F5;
	border-radius: 10% 10% 0% 0;
	box-shadow: 0 0px 10px #CDD0D6;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	/* height: 90rpx; */
	/* line-height: 90rpx; */
	border-radius: 50rpx;
	font-weight: bold;
	padding: 5rpx 40rpx;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-b-wx{
	text-align: left;
	font-size: 42rpx;
	color: #222222;
	padding: 30rpx 0 30rpx 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.agreement {
	display: flex;
	flex-direction: row;
	/* justify-content: center; */
	align-items: center;
	font-size: 30rpx;
	/* margin-top: 10rpx; */
	margin-bottom: 80rpx;
	color: #909399;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}
</style>